<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, user-scalable=no">

	<title>Open Library Online</title>

	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700" >
	<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,300,700&subset=latin,vietnamese' rel='stylesheet' type='text/css'>

	<link rel="stylesheet" href="<?php echo base_url() ?>/assets/css/font-awesome.css">
	<link rel="stylesheet" href="<?php echo base_url() ?>/assets/css/style.css">

	<script src="<?php echo base_url() ?>/assets/js/jquery-1.11.1.min.js"></script>
	<script src="<?php echo base_url() ?>/assets/js/user.js"></script>
</head>
<body>

<div id="mobileNav">
	<?php echo $menu; ?>
</div>

<div id="main">
	<section id="top-bar">
		<div class="group user">
			<?php if(isset($user)) { ?>
				<span id="username">
					<a href="<?php echo base_url() ?>user" title="">
						<i class="fa fa-user"></i> &nbsp; 
						<?php echo $user; ?> &nbsp; <i class="fa fa-angle-down"></i>
					</a>
					
					<a class="edit" href="<?php echo base_url() ?>user/show_profile"><i class="fa fa-gear"></i></a>

					<a class="logout" href="<?php echo base_url() ?>user/logout"><i class="fa fa-sign-out"></i></a>

				</span>

			<?php }
			else { ?>

				<span id="login-button"><i class="fa fa-lock"></i> Login</span> 
				&nbsp; | &nbsp;
				<a id="register-button" href="/openlibraryonline/welcome/register">
					<i class="fa fa-user"></i> Register
				</a>

			<?php } ?>
		</div>

		<div class="group search">
			<form id="search-form" action="<?php echo base_url(); ?>home/search" 
				method="post" accept-charset="utf-8">
				<i class="fa fa-search"></i>
				<input type="text" name="text" class="input-text">
			</form>

			<script>
				$('#search-form i.fa-search').click(function() {
					if($('#search-form .input-text').val() != '')
						$('#search-form').submit();
				});
				// $('#search-form i.fa-search').tap(function() {
				// 	if($('#search-form .input-text').val() != '')
				// 		$('#search-form').submit();
				// });
			</script>			
		</div>
	</section>

	<?php if (isset($panel) && $panel == true) { ?>
	<section class="banner">
		<div class="wrapper">
			<h1> Open Library Online</h1>
			<img src="<?php echo base_url() ?>assets/img/banner_item.png" alt="">
		</div>
	</section>
	<?php } ?>

	<section id="navigation">
		<div class="wrapper">
			<div id="mobileNavButton">&#9776</div>

			<strong class="brand"><a href="<?php echo site_url(); ?>" title="">
				open<span class="text-orange">L</span>ibary
			</a></strong>
			
			<nav>
				<?php echo $menu; ?>
			</nav>

		</div>
	</section>	
	<!-- ------------------------------------------------ -->

	<div class="form login-form form-hidden">
		<h2 class='title'>
			Login
			<i class="fa fa-times"></i>
		</h2>

		<form action="<?php base_url(); ?>user/get_login" method="post" accept-charset="utf-8">	
			<p>
				<span><i class="fa fa-user"></i> </span>
				<input type="text" name="username" placeholder="username or email">
			</p>

			<p>
				<span><i class="fa fa-lock"></i> </span>
				<input type="password" name="password" placeholder="password">
			</p> <p></p>
			<p>
				<span class="text-orange error" style="width: 100%; font-size: 11px;"></span>
			</p>
			<p>
				<input type="submit" name="login" value="Login">
			</p>
		</form>
	</div>

	<!-- <div class="form register-form form-hidden">
		<h2 class='title'>
			Register
			<i class="fa fa-times"></i>
		</h2>
		<form action="<?php echo base_url(); ?>welcome/get_register" method="post" accept-charset="utf-8">
			<p>
				<span><i class="fa fa-envelope"></i> </span>
				<input type="text" name="email" placeholder=" Email">
			</p>
			<p>
				<span><i class="fa fa-user"></i> </span>
				<input type="text" name="username" placeholder="Username">
			</p>

			<p>
				<span><i class="fa fa-lock"></i> </span>
				<input type="password" name="password" placeholder="Password">
			</p>

			<p>
				<span><i class="fa fa-circle-o-notch"></i> </span>
				<input type="password" name="repass" placeholder="Re-password">
			</p>
			<p> &nbsp; <br /> </p>
			<p>
				<label>Thông tin chi tiết</label>
			</p>
			<p>
				<label>Tên đầy đủ</label>
				<input type="text" name="fullname" value="" placeholder="Họ và tên">
			</p>
			<p>
				<label>Giới tính</label>
				&nbsp; &nbsp; &nbsp;
				<label>Nam</label>
				<input type="radio" name="gender" value="Nam">
				&nbsp;&nbsp;
				<label>Nữ</label>
				<input type="radio" name="gender" value="Nữ"> 
			</p>
			<p>
				<label>Ngày sinh</label>
				<input type="date" name="dob" value="">
			</p>
			<p>
				<label>Số điện thoại</label>
				<input type="text" name="phone" value="">
			</p>
			<!-- <p>
				<label>Ảnh đại diện</label>
				<input type="image" name="avatar" value="">
			</p> -->
			<!-- <p>
				<label>Công việc</label>
				<input type="text" name="job" value="" placeholder="">
			</p>
			<p>
				<label>Lĩnh vực quan tâm</label>
				<input type="text" name="interestedin" value="">
			</p>


			<p>
				<input type="submit" class="btn-submit" name="" value="Register">
			</p>
		</form> -->
			
	<!-- </div> -->

	

	
	